<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .pd24 {
        padding: 24px;
    }

    .mt24 {
        margin-top: 24px;
    }

    .dissolution__boot {
        width: 100%;
        height: 0;
        opacity: 1;
        border: 1px dashed #e0e0e0;
        margin: 40px auto auto auto;
    }
</style>

<body>
    <div id="app" class="bgc-f2 pl-16 pr-16 pt-16" v-cloak>
        <div>
            <div class="ub ub-ac ub-sb mb-16">
                <div>
                    <div class=" tx-16 ub ub-ac">
                        <div class="bgc-bl uw-4 uh-16 mr-8 mb-1"></div>
                        <div>门店基本信息</div>
                    </div>
                </div>
                <div>
                    <template v-if="!edit">
                        <el-button type="primary" size="small" @click="editClick()" class="tx-14">编辑</el-button>
                    </template>
                    <template v-else>
                        <el-button @click="cancelClick()" size="small" class="tx-14">取 消</el-button>
                        <el-button type="primary" size="small" @click="sumbitClick()" class="tx-14">保存</el-button>
                    </template>
                </div>
            </div>
            <div class="bgc-wh pd24">
                <el-row :gutter="16">
                    <el-col :span="6">
                        <div>
                            <div class="tx-12 tx-66 mb-8">门店名称</div>
                            <div>
                                <el-input v-model="form.name" size="small" clearable v-if="edit"></el-input>
                                <span class="mt-4" v-else>{{hotel.name}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <div class="tx-12 tx-66 mb-8">门店地址</div>
                            <div>
                                <el-input v-model="form.address" size="small" clearable v-if="edit"></el-input>
                                <span v-else>{{hotel.address}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <div class="tx-12 tx-66 mb-8">联系人</div>
                            <div>
                                <el-input v-model="form.contacts" size="small" clearable v-if="edit"></el-input>
                                <span v-else>{{hotel.contacts}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <div class="tx-12 tx-66 mb-8">联系电话</div>
                            <div>
                                <el-input v-model="form.telephone" size="small" clearable v-if="edit"></el-input>
                                <span v-else>{{hotel.telephone}}</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="16" class="mt24">
                    <el-col :span="6">
                        <div>
                            <div class="tx-12 tx-66 mb-8">创建日期</div>
                            <div>
                                <el-input v-model="form.crTime" size="small" disabled v-if="edit"></el-input>
                                <span v-else>{{hotel.crTime}}</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <div class="dissolution__boot"></div>
            </div>
        </div>
    </div>
    <script type="text/babel">
        window.vm = new Vue({
            el: '#app',
            data: {
                edit: false,
                hotel: Pms.getDate("hotel", {}),
                form: {
                    name: "",
                    address: "",
                    contacts: "",
                    telephone: "",
                    crTime: "",
                },
            },
            mounted() {
                this.closeLoading();
            },
            created() {
                this.startLoading("加载中")
            },
            methods: {
                editClick() {
                    this.edit = true;
                    this.form = JSON.parse(JSON.stringify(this.hotel));
                },
                cancelClick() {
                    this.edit = false;
                },
                sumbitClick() {
                    if (!this.form.name) return this.msgError("请填写门店名称");
                    if (!this.form.address) return this.msgError("请填写门店地址");
                    if (!this.form.contacts) return this.msgError("请填写联系人");
                    if (!this.form.telephone) return this.msgError("请填写联系人电话");

                    this.startLoading("加载中", { background: "rgba(0, 0, 0, 0)", target: document.getElementsByClassName("el-dialog")[0] })
                    this.POST({ url: top.Config.curUrl + "/bst/bstHotel/save", map: this.form }).then((res) => {
                        setTimeout(() => {
                            if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                                Pms.setDate("hotel", this.form);
                                this.hotel = this.form;
                                this.edit = false;
                            } else { //如果返回码是200则登录成功
                                this.msgError(res.retmsg);
                            }
                            this.closeLoading();
                        }, 500);
                    })
                }
                // getdata() {
                //     this.GET({ url: top.Config.curUrl + "/bst/bstHotel/list", map: this.params }).then((res) => {
                //         if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                //             this.tableData = res.result.pageInfo.list;
                //             this.total = res.result.pageInfo.total;
                //         } else { //如果返回码是200则登录成功
                //             this.msgError(res.retmsg)
                //         }
                //         top.vm.closeLoading();
                //     })
                // },

            }
        })

    </script>

</body>

</html>